<template>
  <div>
    <div>
      <el-col
        v-for="(item, index) in storagers"
        :key="item.number"
        class="info"
      >
        <img :src="item.pic" />
        <h1>编号：{{ item.number }}</h1>
        <h1>记录员：{{ item.recorder }}</h1>
        <h1>录入时间:{{ item.dateTime }}</h1>
      </el-col>

      <input
        type="file"
        ref="recordUpload"
        @change="handleRecord"
        style="display: none"
      />
      <el-button class="upload" @click="showRecordDialog">记录上传</el-button>
      <el-image
        style="max-width: 200px; max-height: 200px"
        :src="imageUrl"
        :fit="fit"
        :preview-src-list="[imageUrl]"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      number: 1,
      imageUrl: "",
      fit: "contain",
      storagers: [
        // {
        //   pic: require("../assets/advertisement1.png"),
        //   number: "1",
        //   recorder: "sRecalls",
        //   dateTime: "",
        // },
      ],
    };
  },
  methods: {
    showRecordDialog() {
      this.$refs.recordUpload.click();
    },
    //上传数据
    handleRecord(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const storager = {};
        storager.recorder = "sRecalls";
        storager.pic = reader.result;
        storager.number = this.number;
        this.number++;
        storager.dateTime = this.getTime();
        this.storagers.push(storager);
      };
    },
    getTime() {
      const now = new Date();
      const options = {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false,
      };
      const formatted = now.toLocaleString("zh-CN", options);
      return formatted;
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="css" scoped>
.info {
  display: flex;
  justify-content: space-around;
  height: 90px;
  border: solid 1px black;
}

.info img {
  width: 90px;
  height: 70px;
  margin: auto 0;
}

.info h1 {
  font-size: 30px;
  margin: auto 0;
  font-weight: 400;
}

.upload {
  background-color: #4bbf5c;
  height: 60px;
  width: 150px;
  margin-left: 50%;
  margin-top: 20px;
  transform: translate(-50%, 0);
  color: white;
  font-size: 28px;
  text-align: center;
  line-height: 60px;
  border-radius: 15px;
}
</style>
